<template>
  <div id="bgm-calendar" v-if="JSON.stringify(weekList) !== '{}'">
    <div class="calendar-head">
      <div class="week-list" :class="isShow ? 'show' : ''">
        <span v-for="(item, index) in weekDays"
          :key="index"
          v-text="language ? item.cn : item.ja"
          @click="changeWeek(item.id)"
        ></span>
      </div>
      <span class="calendar-week" v-if="weekList"
        v-text="language ? weekList.weekday.cn : weekList.weekday.ja" 
        @click="isShow = !isShow"
      ></span>
      <span class="calendar-date" @click="resetWeek()">{{today}}</span>
      <span class="language" @click="language = !language"><Icon type="ios-switch" /></span>
    </div>
    <div class="bgm-list">
      <div class="bgm-list-item"
        v-for="(item, index) in weekList.items"
        :key="item.id + '-' + index"
      >
        <a :href="item.url" target="_blank">
          <span v-if="language" v-text="item.name_cn !== '' ? item.name_cn : item.name"></span>
          <span v-else>{{item.name}}</span>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from "utils/utils"
import { bangumiCalendar } from 'service'

export default {
  name: 'BangumiCalendar',
  data() {
    return {
      calendarList: [],
      weekList: {weekday: {cn: 'NaN', ja: 'NaN'}},
      week: new Date().getDay(),
      weekDays: [
        {cn: '星期一', ja: '月耀日', id: 1},
        {cn: '星期二', ja: '火耀日', id: 2},
        {cn: '星期三', ja: '水耀日', id: 3},
        {cn: '星期四', ja: '木耀日', id: 4},
        {cn: '星期五', ja: '金耀日', id: 5},
        {cn: '星期六', ja: '土耀日', id: 6},
        {cn: '星期日', ja: '日耀日', id: 0},
      ],
      today: formatDate(new Date(), "yyyy-MM-dd"),
      subject: {},
      language: true,
      isShow: false,
    }
  },
  mounted() {
    this.bgmCalendar()
  },
  methods: {
    async bgmCalendar() {
      let res = await bangumiCalendar()
      this.calendarList = res.data
      this.weekList = res.data[this.week == 0 ? 6 : this.week - 1]
    },
    changeWeek(id) {
      this.weekList = this.calendarList[id == 0 ? 6 : id - 1]
      // 同步修改日期
      if (id == 0) { id = 7 }
      var date = new Date()
      var week = date.getDay()
      if(week == 0) { week = 7 }
      if (id > week) {
        this.today = formatDate(new Date(date.setDate(date.getDate()  + (id - week))), "yyyy-MM-dd")
      } else if(id == week) {
        this.today = formatDate(new Date(), "yyyy-MM-dd")
      } else {
        this.today = formatDate(new Date(date.setDate(date.getDate() + 7 - (week - id))), "yyyy-MM-dd")
      }
      this.isShow = false
    },
    resetWeek() {
      var week = new Date().getDay()
      this.weekList = this.calendarList[week == 0 ? 6 : week - 1]
      this.today = formatDate(new Date(), "yyyy-MM-dd")
      this.isShow = false
    }
  },
}
</script>

<style lang="scss" scoped>
#bgm-calendar {
  box-shadow: 0 2px 9px rgba(31,45,61,.15);
  padding: 0.5rem;
  background: #fff;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  .calendar-head {
    height: 30px;
    line-height: 30px;
    position: relative;
    .week-list {
      position: absolute;
      background: #fff;
      box-shadow: 0 2px 9px rgba(31,45,61,.15);
      cursor: pointer;
      top: 30px;
      width: 60px;
      text-align: center;
      display: none;
      transition: all 0.5s ease;
      &.show {
        display: block;
      }
      span {
        display: block;
        &:hover {
          background: rgba(40,207,207,0.5);
        }
      }
    }
    span {
      display: inline-block;
      text-align: center;
      &.calendar-date {
        cursor: pointer;
        width: calc(100% - 90px);
      }
      &.calendar-week {
        width: 60px;
        cursor: pointer;
      }
      &.language{
        width: 30px;
        cursor: pointer;
      }
    }
  }
  .bgm-list {
    padding-top: 5px;
    .bgm-list-item {
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      span {
        color: #666666;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      } 
      &:hover {
        background: rgba(40,207,207,0.5);
      }
    }
  }
}
</style>
<style lang="scss">
.subject{
  .subject-info {
    position: relative;
    height: 210px;
    img {
      float: left;
      margin-right: 10px;
    }
    span {
      display: block;
    }
  }
}
</style>